<template>
	<view>
		<view class="goodsCard">
			<view class="check_type">
				<image :src="imgType[goods.checkType]" style="width: 20px;height: 20px;" @click="emitGoods('checkType', !goods.checkType)"></image>
			</view>
			<view class="img">
				<image src="../../static/goods/goods1.png"></image>
			</view>
			<view class="content">
				<view class="title">
					{{goods.title}}
				</view>
				<view class="type">
					{{goods.desc}}
				</view>
				<view class="price">
					<view class="price_num">
						￥{{goods.price}}<text class="no_price">￥{{goods.oldPrice}}</text>
					</view>
					<u-number-box v-model="goods.amount">
						<view slot="minus" class="minus" @click="emitGoods('amount', -1)">
							<u-icon name="minus" size="28"></u-icon>
						</view>
						<text slot="input" style="width: 50px;text-align: center;" class="input">{{goods.amount}}</text>
						<view slot="plus" class="plus"  @click="emitGoods('amount', 1)">
							<u-icon name="plus" size="28"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
		</view>
		<slot name="two" />
	</view>
</template>

<script>
	export default {
		name: 'CartCard',
		props: {
			goods: {
				type: Object,
				default: () => {
					return {
						id: '',
						title: '',
						desc: '',
						price: '',
						oldPrice: '',
						img: '',
						amount:'',
						checkType:0
					}
				}
			},
			goodsIndex:{
				type:Number
			}
		},
		data() {
			return {
				imgType: {
					0: '../../static/icon/round.png',
					1: '../../static/icon/answer.png'
				},
			};
		},
		methods:{
			emitGoods(type,key){
				this.$emit('changeGoods',type,key,this.goodsIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsCard {
		display: flex;
		padding: 40rpx 24rpx;

		.check_type {
			display: flex;
			align-items: center;
			margin-right: 15rpx;
		}

		.img {
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.content {
			padding: 0 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 44rpx;
				color: rgba(51, 51, 51, 1);
			}

			.type {
				height: 40rpx;
				opacity: 1;
				border-radius: 2rpx;
				background: rgba(247, 247, 247, 1);
				display: inline-block;
				padding: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				letter-spacing: 0rpx;
				line-height: 38rpx;
				color: rgba(153, 153, 153, 1);
				margin: 10rpx 0;
			}

			.price {
				display: flex;
				align-items: flex-end;

				justify-content: space-between;

				.price_num {
					height: 28rpx;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 28rpx;
					color: rgba(246, 55, 71, 1);

					.no_price {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
						position: relative;
						margin-left: 8rpx;
					}

					.no_price::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						width: 100%;
						height: 1px;
						background-color: currentColor;
						transform: translateY(-50%);
					}
				}

				.btn {}
			}
		}
	}
</style>